<template>
  <RouterView />
  <van-tabbar v-model="active">
    <van-tabbar-item
      v-for="item in router.options.routes[0].children"
      :key="item.path"
      :icon="item.meta.icon"
      :url="`#/${item.path}`"
    >
      {{ item.meta.name }}
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const active = ref(0)
const router = useRouter()
const route = useRoute()

const updateActive = () => {
  const children = router.options.routes[0]?.children || []
  const index = children.findIndex(item => '/' + item.path === route.path)
  if (index !== -1) {
    active.value = index
  }
}

onMounted(() => {
  updateActive()
})

watch(() => route.path, updateActive)
</script>